<template>
  <div style="padding: 0px 20px">
    <div class="table-container">
      <el-row :gutter="20">
        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '20px ' }">
              <div style="display: flex; justify-content: center">
                <div style="display: flex; align-items: center; flex: 1">
                  <div style="flex: 0 0 40px">
                    <el-image style="" :src="iourl" fit="fill"></el-image>
                  </div>
                  <div style="margin-left: 10px; display: flex; flex-direction: column; align-items: left; justify-content: center">
                    <div style="font-size: 16px; font-weight: 600">化成设备1</div>
                    <div>ST0001</div>
                  </div>
                </div>
                <!-- <div style="display: flex; flex-direction: column; justify-content: center">
                  <el-row>
                    <button class="menu-btn" @click="filterDate(0)">全部</button>
                    <button class="menu-btn" @click="filterDate(1)">日</button>
                    <button class="menu-btn" @click="filterDate(2)">月</button>
                    <button class="menu-btn" @click="filterDate(3)">周</button>
                    <button class="menu-btn" @click="filterDate(4)">年</button>
                  </el-row>
                </div> -->
              </div>
            </el-card>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-card class="box-card" shadow="never">
              <vab-chart autoresize :option="option3" style="height: 160px" />
            </el-card>
            <el-card class="box-card" shadow="never">
              <vab-chart autoresize :option="option4" style="height: 160px" />
            </el-card>
          </el-col>
          <el-col :lg="16" :md="16" :sm="16" :xl="16" :xs="16">
            <el-card class="box-card project" shadow="never">
              <div slot="header" class="clearfix" style="display: flex; align-items: center; justify-content: right">
                <div>
                  <el-radio-group v-model="chartKey" fill="#909399">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">周</el-radio-button>
                    <el-radio-button label="3">月</el-radio-button>
                    <el-radio-button label="4">年</el-radio-button>
                  </el-radio-group>
                </div>
                <div style="margin-left: 20px">
                  <el-radio-group v-model="chart2Key">
                    <el-radio-button label="alarm">报警统计</el-radio-button>
                    <el-radio-button label="number">产量统计</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div v-show="chart2Key == 'alarm'">
                <vab-chart autoresize :option="optionDayAlarm" style="height: 364px" v-show="chartKey == '1'" />
                <vab-chart autoresize :option="optionWeekAlarm" style="height: 364px" v-show="chartKey == '2'" />
                <vab-chart autoresize :option="optionMonthAlarm" style="height: 364px" v-show="chartKey == '3'" />
                <vab-chart autoresize :option="optionYearAlarm" style="height: 364px" v-show="chartKey == '4'" />
              </div>
              <div v-show="chart2Key == 'number'">
                <vab-chart autoresize :option="optionDay" style="height: 364px" v-show="chartKey == '1'" />
                <vab-chart autoresize :option="optionWeek" style="height: 364px" v-show="chartKey == '2'" />
                <vab-chart autoresize :option="optionMonth" style="height: 364px" v-show="chartKey == '3'" />
                <vab-chart autoresize :option="optionYear" style="height: 364px" v-show="chartKey == '4'" />
              </div>
            </el-card>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8"></el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '20px ' }">
              <div style="display: flex; justify-content: center; padding: 20px">
                <div style="display: flex; align-items: center; flex: 1">
                  <el-row>
                    <button :class="['menu-btn', tableKey == '' ? 'checkBtn' : '']" @click="filterDate(0)">全部</button>
                    <button :class="['menu-btn', tableKey == '1' ? 'checkBtn' : '']" @click="filterDate(1)">日</button>
                    <button :class="['menu-btn', tableKey == '2' ? 'checkBtn' : '']" @click="filterDate(2)">周</button>
                    <button :class="['menu-btn', tableKey == '3' ? 'checkBtn' : '']" @click="filterDate(3)">月</button>
                    <button :class="['menu-btn', tableKey == '4' ? 'checkBtn' : '']" @click="filterDate(4)">年</button>
                  </el-row>
                  <el-date-picker
                    v-model="filterData.day"
                    type="date"
                    placeholder="选择日期"
                    v-show="tableKey == 1"
                    clearable="false"
                    @change="fetchData()"
                  ></el-date-picker>
                  <el-date-picker
                    v-model="filterData.week"
                    type="week"
                    format="yyyy 第 WW 周"
                    placeholder="选择周"
                    v-show="tableKey == 2"
                    clearable="false"
                    @change="fetchData()"
                  ></el-date-picker>
                  <el-date-picker
                    v-model="filterData.month"
                    type="month"
                    placeholder="选择月"
                    v-show="tableKey == 3"
                    clearable="false"
                    @change="fetchData()"
                  ></el-date-picker>
                  <el-date-picker
                    v-model="filterData.year"
                    type="year"
                    placeholder="选择年"
                    v-show="tableKey == 4"
                    clearable="false"
                    @change="fetchData()"
                  ></el-date-picker>
                </div>
                <div style="display: flex; justify-content: right; align-items: center; flex: 1">
                  <el-form
                    ref="form"
                    :inline="true"
                    :model="queryForm"
                    @submit.native.prevent
                    style="display: flex; justify-content: center; align-items: center"
                  >
                    <el-select v-model="sortType" placeholder="排序规则" style="width: 160px" @change="sortData($event, index)">
                      <el-option label="总报警次数" value="0"></el-option>
                      <el-option label="总产量" value="1"></el-option>
                      <el-option label="NG电池数量" value="2"></el-option>
                      <el-option label="良品率" value="3"></el-option>
                      <el-option label="A级故障率" value="4"></el-option>
                      <el-option label="B级故障率" value="5"></el-option>
                      <el-option label="C级故障率" value="6"></el-option>
                      <el-option label="总故障率" value="7"></el-option>
                    </el-select>
                  </el-form>
                  <el-tooltip class="item" effect="dark" content="点击查看原始数据" placement="bottom">
                    <i
                      class="el-icon-tickets"
                      style="padding-left: 16px; font-size: 26px; color: #909399; cursor: pointer"
                      @click="right = true"
                    ></i>
                  </el-tooltip>
                </div>
              </div>
              <el-table ref="tableSort" :data="list" :element-loading-text="elementLoadingText" :show-header="false">
                <el-table-column label="设备名称" prop="projectName" show-overflow-tooltip>
                  <template #default="scope">
                    <div style="display: flex; padding: 16px">
                      <div style="flex: 0 0 40px">
                        <el-image style="" :src="zjurl" fit="fill"></el-image>
                      </div>
                      <div style="margin-left: 10px; display: flex; flex-direction: column; align-items: left; justify-content: center">
                        <div style="font-size: 16px; font-weight: 600">治具{{ scope.$index + 1 }}</div>
                        <div>
                          {{ scope.row.costNumber }}
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="" prop="projectName" min-width="200px">
                  <template #default="{ row }">
                    <el-descriptions direction="vertical" :column="4" border>
                      <el-descriptions-item label="总产量">
                        <b>{{ row.totalProNum }}</b>
                      </el-descriptions-item>
                      <el-descriptions-item label="NG电池数量">
                        <b>{{ row.totalNgNum }}</b>
                      </el-descriptions-item>
                      <el-descriptions-item label="总报警次数" :span="2">
                        <b>{{ row.totalNum }}</b>
                      </el-descriptions-item>
                    </el-descriptions>
                  </template>
                </el-table-column>
                <el-table-column label="" prop="projectName" min-width="200px">
                  <template #default="{ row }">
                    <el-descriptions direction="vertical" :column="4" border>
                      <el-descriptions-item label="A级故障数/率">
                        <b>{{ row.AgNum + '/' + row.AgPer + '‱' }}</b>
                      </el-descriptions-item>
                      <el-descriptions-item label="B级故障数/率">
                        <b>{{ row.BgNum + '/' + row.BgPer + '‱' }}</b>
                      </el-descriptions-item>
                      <el-descriptions-item label="C级故障数/率" :span="2">
                        <b>{{ row.CgNum + '/' + row.CgPer + '‱' }}</b>
                      </el-descriptions-item>
                    </el-descriptions>
                  </template>
                </el-table-column>
                <el-table-column label="良品率" prop="alarmTime">
                  <template #default="{ row }">
                    <div style="display: flex; flex-direction: column; align-items: left; justify-content: center">
                      <div>良品率</div>
                      <div style="font-size: 16px; font-weight: 600">
                        <el-progress :percentage="row.okPer" color="LimeGreen"></el-progress>
                      </div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="总故障率" prop="alarmTime">
                  <template #default="{ row }">
                    <div style="display: flex; flex-direction: column; align-items: left; justify-content: center">
                      <div>总故障率</div>
                      <div style="font-size: 16px; font-weight: 600">
                        <el-progress :percentage="row.totalNgPer" color="red" :format="format"></el-progress>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <el-drawer title="原始数据" :visible.sync="right" direction="btt" size="50%">
              <div style="padding: 20px">
                <el-table
                  ref="tableSort"
                  :data="warnlist"
                  :element-loading-text="elementLoadingText"
                  :height="height"
                  @selection-change="setSelectRows"
                >
                  <el-table-column label="序号" show-overflow-tooltip width="95">
                    <template #default="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label="费用号" prop="costNumber" show-overflow-tooltip />
                  <el-table-column label="设备编码" prop="equipmentCode" show-overflow-tooltip />
                  <el-table-column label="治具号" prop="fixtureNumber" show-overflow-tooltip />
                  <el-table-column label="报警内容" prop="alarmContent" show-overflow-tooltip />
                  <el-table-column label="报警代码" prop="alarmCode" show-overflow-tooltip />
                  <el-table-column label="报警等级" prop="alarmLevel" />
                  <el-table-column label="发生时间" prop="alarmTime" width="200" />
                  <el-table-column label="创建时间" prop="createdTime" width="200" />
                </el-table>
              </div>
            </el-drawer>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { getProjectList } from '@/api/wordOrder'
  import VabChart from '@/plugins/echarts'
  import { getAll } from '@/api/alarm'
  export default {
    name: 'alarmStatistics',
    filters: {},
    components: {
      VabChart,
    },
    data() {
      return {
        right: false,
        activeIndex: '1',
        list: [],
        warnlist: [],
        iourl: require('@/assets/img/io.png'),
        zjurl: require('@/assets/img/zj.png'),
        option3: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['总产量', 'NG电池数量', 'OK电池数量'],
          },
          series: [
            {
              name: '分类',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, 60],

              // for funnel
              x: '35%',
              width: '39%',
              funnelAlign: 'right',
              max: 200,

              itemStyle: {
                normal: {
                  label: {
                    position: 'inner',
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              data: [
                { value: 145, name: 'NG电池数量' },
                { value: 1055, name: 'OK电池数量' },
              ],
            },
            {
              name: '电池统计',
              type: 'pie',
              radius: [65, 80],

              // for funnel
              x: '10%',
              width: '89%',
              funnelAlign: 'left',
              max: 1048,

              data: [{ value: 1200, name: '总产量' }],
            },
          ],
        },
        option4: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['故障数/率', '未出现故障/率', 'A', 'B', 'C'],
          },
          series: [
            {
              name: '故障等级',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, 60],

              // for funnel
              x: '35%',
              width: '39%',
              funnelAlign: 'right',
              max: 200,

              itemStyle: {
                normal: {
                  label: {
                    position: 'inner',
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              data: [
                { value: 25, name: 'A' },
                { value: 125, name: 'B' },
                { value: 100, name: 'C' },
              ],
            },
            {
              name: '报警统计',
              type: 'pie',
              radius: [65, 80],

              // for funnel
              x: '10%',
              width: '89%',
              funnelAlign: 'left',
              max: 1048,

              data: [
                { value: 250, name: '故障数/率' },
                { value: 950, name: '未出现故障/率' },
              ],
            },
          ],
        },
        filterData: {
          day: '',
          week: '',
          month: '',
          year: '',
        },
        tableKey: '',
        sortType: '',
        chartKey: '1',
        chart2Key: 'alarm',
        optionDayAlarm: {
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
            ],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [
                820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932,
                901, 934, 1290, 1330, 1320,
              ],
              type: 'line',
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ],
              },
              markLine: {
                data: [{ type: 'average', name: '平均值' }],
              },
            },
          ],
        },
        optionWeekAlarm: {
          color: '#73c0de',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'line',
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ],
              },
              markLine: {
                data: [{ type: 'average', name: '平均值' }],
              },
            },
          ],
        },
        optionMonthAlarm: {
          color: '#fac858',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135],
              type: 'line',
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ],
              },
              markLine: {
                data: [{ type: 'average', name: '平均值' }],
              },
            },
          ],
        },
        optionYearAlarm: {
          color: '#91cc75',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['2019', '2020', '2021', '2022', '2023', '2024', '2025'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [99, 200, 150, 80, 70, 110, 130],
              type: 'line',
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' },
                ],
              },
              markLine: {
                data: [{ type: 'average', name: '平均值' }],
              },
            },
          ],
        },
        optionDay: {
          color: '#5470c6',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
            ],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
            },
          ],
        },
        optionWeek: {
          color: '#73c0de',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'bar',
            },
          ],
        },
        optionMonth: {
          color: '#fac858',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
            },
          ],
        },
        optionYear: {
          color: '#91cc75',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['2019', '2020', '2021', '2022', '2023', '2024', '2025'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'bar',
            },
          ],
        },
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          page: 1,
          pageSize: 20,
          title: '',
        },
      }
    },
    computed: {},
    created() {
      this.fetchData()
      this.fetchWaringData()
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      filterDate(type) {
        this.tableKey = type
        if (type == 0) {
          this.fetchData()
        }
      },
      sortData(value, index) {
        let type = ''
        switch (value) {
          case '0':
            type = 'totalNum'
            break
          case '1':
            type = 'totalProNum'
            break
          case '2':
            type = 'totalNgNum'
            break
          case '3':
            type = 'okPer'
            break
          case '4':
            type = 'AgPer'
            break
          case '5':
            type = 'BgPer'
            break
          case '6':
            type = 'CgPer'
            break
          case '7':
            type = 'totalNgPer'
            break
          default:
            break
        }
        this.list.sort((a, b) => b[type] - a[type])
      },
      async fetchData() {
        const { data, total } = await getProjectList(this.queryForm)
        this.list = data
        this.total = total
        this.list.forEach(function (item) {
          item.sbNum = Math.floor(Math.random() * 200)
          item.totalProNum = Math.floor(Math.random() * 100000) + 10000
          item.totalNgNum = Math.floor(Math.random() * 300)
          item.okPer = (((item.totalProNum - item.totalNgNum) / item.totalProNum) * 100).toFixed(2)
          item.AgNum = Math.floor(Math.random() * 100) + 100
          item.BgNum = Math.floor(Math.random() * 100) + 100
          item.CgNum = Math.floor(Math.random() * 100) + 100
          item.AgPer = ((item.AgNum / item.totalProNum) * 10000).toFixed(2)
          item.BgPer = ((item.BgNum / item.totalProNum) * 10000).toFixed(2)
          item.CgPer = ((item.CgNum / item.totalProNum) * 10000).toFixed(2)
          item.totalNgPer = (((item.AgNum + item.BgNum + item.CgNum) / item.totalProNum) * 10000).toFixed(2)
          item.totalNum = item.AgNum + item.BgNum + item.CgNum
        })
      },
      format(percentage) {
        return `${percentage}‱`
      },
      async fetchWaringData() {
        const { data, total } = await getAll(this.queryForm)
        this.warnlist = data
        this.total = total
      },
    },
  }
</script>
<style lang="scss" scoped>
  .menu-btn {
    padding: 5px 16px;
    margin-right: 20px;
    border-radius: 32px;
    color: #4e5969;
    border: 0px;
    background: #fff;
  }
  .menu-btn:active {
    background: #f2f3f5;
  }
  // .content {
  //   margin: 20px 0px;
  // }
  /* 按钮悬浮颜色 */
  .menu-btn:hover {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  .menu-btn:focus {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  /* 按钮点击颜色 */
  .menu-btn:active {
    background: #f2f3f5;
    border-color: #f2f3f5;
  }
  .project {
    ::v-deep {
      .el-card__body {
        padding: 0;
      }
      .el-card__header {
        padding: 10px 12px;
      }
    }
  }
  .checkBtn {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
  }
</style>
<style lang="scss" scoped>
  .ava-style {
    background: #409eff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
  }
  .user-profile {
    .user-name {
      font-weight: bold;
    }

    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;
    }

    .box-social {
      padding-top: 30px;

      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }

    .user-follow {
      padding-top: 20px;
    }
  }
</style>
